import { ArrowRight, Calendar, FileText, Plus, RefreshCw, User } from "lucide-react";
import { Link, Navigate } from "react-router";
import useMeStore from "../../store/me";
import useArticlesList from "./useArticlesList";

function ArticleList() {
  const { articles, loading, hasMore, loadMore } = useArticlesList();

  return (
    <div className="min-h-screen bg-gradient-to-br from-base-100 to-base-200">
      {/* Page Header */}
      <header className="bg-base-100/80 backdrop-blur-md shadow-sm border-b border-base-300">
        <div className="container mx-auto px-6 py-8">
          <div className="flex justify-between items-center">
            <div className="animate-fade-in">
              <h1 className="text-3xl font-bold bg-gradient-primary bg-clip-text text-transparent mb-2">我的文章</h1>
              <p className="text-base-content/70">管理和查看您的所有文章内容</p>
            </div>
            <Link
              to="/articles/new"
              className="btn btn-primary bg-gradient-primary border-0 hover-lift animate-fade-in"
              style={{ animationDelay: "0.1s" }}
            >
              <Plus className="h-5 w-5" />
              写文章
            </Link>
          </div>
        </div>
      </header>

      {/* Article Content */}
      <main className="container mx-auto px-6 py-8">
        {articles.length === 0 ? (
          // Empty State
          <div className="card w-full bg-base-100/70 backdrop-blur-sm shadow-xl border border-base-300/20 text-center animate-fade-in">
            <div className="card-body py-16">
              <div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-blue-100 to-indigo-200 rounded-full flex items-center justify-center">
                <FileText className="h-12 w-12 text-blue-600" />
              </div>
              <h2 className="text-2xl font-semibold text-base-content mb-3">还没有文章</h2>
              <p className="text-base-content/70 mb-8 text-lg">开始您的写作之旅，创建您的第一篇文章吧</p>
              <Link to="/articles/new" className="btn btn-lg btn-primary bg-gradient-primary border-0 hover-lift">
                <Plus className="h-5 w-5" />
                写文章
              </Link>
            </div>
          </div>
        ) : (
          // Article List
          <div className="space-y-6">
            {articles.map((article, index) => (
              <article
                key={article.uid}
                className="card bg-base-100/70 backdrop-blur-sm shadow-lg border border-base-300/20 hover:shadow-xl transition-all duration-300 hover-lift animate-fade-in"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <Link
                  to={`/articles/${article.uid}`}
                  className="card-body p-6 hover:bg-gradient-to-r hover:from-base-200/30 hover:to-base-300/30 transition-all duration-300 rounded-2xl"
                >
                  {/* Article Meta */}
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 bg-gradient-primary rounded-full flex items-center justify-center">
                      <FileText className="h-5 w-5 text-white" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-3 text-sm text-base-content/60">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          {new Date(article.createdAt).toLocaleDateString("zh-CN")}
                        </span>
                        {article.author?.nickname && (
                          <span className="flex items-center gap-1">
                            <User className="h-4 w-4" />
                            {article.author.nickname}
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="badge badge-primary badge-outline">文章</div>
                  </div>

                  {/* Article Title */}
                  <h2 className="text-2xl font-bold text-base-content mb-3 line-clamp-2 hover:text-primary transition-colors duration-300">
                    {article.title}
                  </h2>

                  {/* Article Preview */}
                  <p className="text-base-content/70 line-clamp-3 mb-4 leading-relaxed">
                    {article.content.substring(0, 150)}...
                  </p>

                  {/* Read More Button */}
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-base-content/60">字数: {article.content.length}</span>
                    <span className="text-primary font-medium flex items-center gap-1 hover:gap-2 transition-all duration-200">
                      阅读更多
                      <ArrowRight className="h-4 w-4" />
                    </span>
                  </div>
                </Link>
              </article>
            ))}

            {/* Load More Button */}
            {hasMore && (
              <div className="text-center mt-12 animate-fade-in">
                <button
                  type="button"
                  onClick={loadMore}
                  disabled={loading}
                  className="btn btn-lg btn-outline btn-primary hover-lift"
                >
                  {loading ? (
                    <span className="flex items-center gap-2">
                      <div className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
                      加载中...
                    </span>
                  ) : (
                    <span className="flex items-center gap-2">
                      <RefreshCw className="h-5 w-5" />
                      加载更多
                    </span>
                  )}
                </button>
              </div>
            )}
          </div>
        )}
      </main>
    </div>
  );
}

// TODO: 有多次调用接口的问题
// TODO: 自动翻页有 bug
// TODO: 重定向逻辑需要修复

export default function MyArticlesPage() {
  const meStore = useMeStore();

  // 当用户状态变化时，检查是否需要重定向
  switch (meStore.me.type) {
    case "init":
      return <Navigate to="/login" />;
    case "loading":
      return (
        <div className="min-h-screen bg-gradient-to-br from-base-100 to-base-200 flex flex-col items-center justify-center">
          <div className="text-center animate-fade-in">
            <div className="w-16 h-16 bg-gradient-primary rounded-full flex items-center justify-center mb-6 animate-pulse">
              <div className="w-8 h-8 border-3 border-white border-t-transparent rounded-full animate-spin"></div>
            </div>
            <h2 className="text-xl font-semibold text-base-content mb-2">加载中...</h2>
            <p className="text-base-content/70">正在获取您的文章列表</p>
          </div>
        </div>
      );
    case "ok":
      return <ArticleList />;
    default:
      throw new Error("未知的用户状态");
  }
}
